<template>
	<div id="couponDetail">
		<!-- 优惠券详情 -->
		<!-- 注意：这个并不在页面上显示-->


		<template>
			<el-row id="detail">
				<el-col :span="4">名称</el-col>
				<el-col :span="4">介绍名称</el-col>
				<el-col :span="4">标签</el-col>
				<el-col :span="4">优惠券类型</el-col>
				<el-col :span="4">最低消费</el-col>
				<el-col :span="4">优惠面值</el-col>
			</el-row>

			<el-row id="detail2">
				<el-col :span="4">{{tableData.name}}</el-col>
				<el-col :span="4">{{tableData.desc}}</el-col>
				<el-col :span="4">{{tableData.tag}}</el-col>
				<el-col :span="4">{{tableData.type==0?'通用领券':tableData.type==1?'注册赠券':'兑换码'}}</el-col>
				<el-col :span="4">满{{tableData.min}}元可用</el-col>
				<el-col :span="4">减免{{tableData.discount}}元</el-col>

			</el-row>
			<el-row id="detail3">
				<el-col :span="4">每人限额</el-col>
				<el-col :span="4">当前状态</el-col>
				<el-col :span="4">商品范围</el-col>
				<el-col :span="4">有效期</el-col>
				<el-col :span="4">优惠兑换码</el-col>
				<el-col :span="4">发行数量</el-col>

			</el-row>
			<el-row id="detail4">
				<el-col :span="4">{{tableData.limit}}</el-col>
				<el-col :span="4">{{tableData.status==0?'正常':'已过期'}}</el-col>
				<el-col :span="4">{{tableData.goodsType==0?'全场通用':''}}</el-col>
				<el-col :span="4">领取{{tableData.days}}天有用</el-col>
				<el-col :span="4">{{kong}}</el-col>
				<el-col :span="4">{{tableData.limit==0?'不限量':tableData.limit}}</el-col>


			</el-row>
			<!-- {{$route.query.id}} -->
		</template>

		<template>
			<el-row class="role-head">
				<el-input placeholder="请输入用户ID"></el-input>
				<el-select v-model="value2" placeholder="请选择优惠券状态">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="searchAd">查询</el-button>
			</el-row>
		</template>
	 <template>
			<el-table  style="width: 100%">
				<el-table-column  label="用户优惠券id" width="180">
				</el-table-column>
				<el-table-column label="用户id" width="180">
				</el-table-column>
				<el-table-column  label="领取时间">
				</el-table-column>
				<el-table-column  label="使用状态">
				</el-table-column>
				<el-table-column  label="订单id">
				</el-table-column>
				<el-table-column  label="使用时间">
				</el-table-column>
			</el-table>
		</template> 


	</div>
</template>

<script>
	import {
		detailCopon,
	} from '../../https/promotion'
	export default {
		data() {
			return {
				// 表格数据
				tableData: [{}],
				id: '',
				kong: '',
				options2: [{
					value: 0,
					label: '未使用'
				}, {
					value: 1,
					label: '已过期'
				}, {
					value: 2,
					label: '已下架'
				}, {
					value: 3,
					label: '已使用'
				}],
				value2: '',

			}
		},
		methods: {
			// 这里进行请求	
			searchAd() {

			}
		},
		created() {

		},

		mounted() {

			//对传递过来的数据进行接收
			this.id = this.$route.query.id
			if (this.id != undefined) {
				sessionStorage.setItem("id", this.id)

			}
			// 刷新页面就在这里进行跳转
			this.$router.push({
				path: '/promotion/couponDetail',
				query: {
					id: sessionStorage.getItem("id")
				}
			})

			console.log("我去", this.$route)

			console.log("我是传递过来的数据", this.id)
			let params = {
				id: sessionStorage.getItem("id")
			}
			detailCopon(params).then(res => {
				this.tableData = res.data.data
				console.log('我是详情返回的数据', res)
				console.log('我是详情返回的数据', this.tableData)
			}).catch(err => {
				console.log('我是错误返回的数据', err)
			})


		},

	}
</script>

<style>
	#detail,
	#detail2,
	#detail3,
	#detail4 {
		text-align: center;
	}

	#detail,
	#detail3 {
		line-height: 37px;
		background-color: #F2F6FC;
	}

	#detail2,
	#detail4 {
		line-height: 60px;
		background-color: #FFFFFF;
	}

	.el-col {
		border: 1px solid transparent;
	}

	.role-head {
		margin-top: 20px;
	}
	.role-head input{
		width: 150px;
	}
	 .role-head .el-input{
		 width: 150px;
	 }
</style>
